package com.cc.openeye.scroller

import com.tencent.kuikly.core.pager.Pager
import com.tencent.kuikly.core.annotations.Page
import com.tencent.kuikly.core.base.Color
import com.tencent.kuikly.core.base.ViewBuilder
import com.tencent.kuikly.core.reactive.handler.observable
import com.tencent.kuikly.core.views.Scroller
import com.tencent.kuikly.core.views.View

@Page("TestScrollerPage")
internal class TestScrollerPage : Pager() {

    private var offsetX by observable(0f)
    private var offsetY by observable(0f)
    private var lastX = 0f
    private var currX = 0f

    override fun body(): ViewBuilder {
        val ctx = this
        return {
            View {
                attr {
                    flex(1f)
                }

                View {
                    attr {
                        width(100f)
                        height(100f)
                        backgroundColor(Color.RED)
                        marginLeft(ctx.offsetX)
                    }
                }

                Scroller {

                    attr {
                        flex(1f)
                        flexDirectionRow()
                        width(pagerData.pageViewWidth)
                        bouncesEnable(false)
                    }



                    event {

//                        pan {
//                            println("====>it.offsetX:${it.x}")
//                            val disX = ctx.currX - ctx.lastX
//                            ctx.lastX = ctx.currX
//                            ctx.currX = it.x
//                            ctx.offsetX += disX
//                            println("====>it.offsetX:${ctx.offsetX}")
//                        }

                        scroll {
                            println("====>it.offsetX:${it.offsetX}")
//                            ctx.offsetX += it.offsetX
//                            println("====>it.offsetX:${ctx.offsetX}")


                            ctx.offsetX = it.offsetX
                        }



                        scrollEnd {
                            println("====>it.dragEnd:${it.offsetX}")
                        }

                        dragBegin {
                            ctx.offsetX = it.offsetX
                            println("====>it.dragBegin:${it.offsetX}")


                        }

//                        dragEnd {
//                            ctx.offsetX = it.offsetX
//                            println("====>it.dragEnd:${it.offsetX}")
//                        }
                    }


                    Scroller {
                        attr {
                            flex(1f)
                            width(pagerData.pageViewWidth * 2)
                        }

                        event {

                            scroll {
                                ctx.offsetY = it.offsetY
                            }

                            dragBegin {
                                ctx.offsetY = it.offsetY

                            }

                            dragEnd {
                                ctx.offsetY = it.offsetY

                            }

                        }


                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.BLACK)
                                width(pagerData.pageViewWidth * 2)

                            }

                            View {
                                attr {
                                    width(100f)
                                    height(100f)
                                    backgroundColor(Color.WHITE)
                                    marginLeft(ctx.offsetX)

                                }
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.BLUE)
                                width(pagerData.pageViewWidth * 2)

                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.RED)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.GRAY)
                            }
                        }


                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.YELLOW)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.BLUE)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.RED)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.GRAY)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.YELLOW)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.BLUE)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.RED)
                            }
                        }

                        View {
                            attr {
                                height(100f)
                                backgroundColor(Color.GRAY)
                            }
                        }

                    }




                }


                View {
                    attr {
                        absolutePosition(bottom = 0f)
                        width(50f)
                        height(50f)
                        backgroundColor(Color.GRAY)
                    }
                }
            }
        }
    }
}